<template>
    <div class="app">
      <h1>你好啊！</h1>
      <WatchDemo1 />
      <WatchDemo2 />
    </div>
  </template>
  
  <script lang="ts">
    import Person from './componentsdemo2/Person.vue'
    import VBind from './componentsdemo2/VBind.vue'
    import ReactiveDemo2 from './componentsdemo2/ReactiveDemo2.vue';
    import ToRefsDemo1 from './componentsdemo2/ToRefsDemo1.vue';
    import ComputedDemo1 from './componentsdemo2/ComputedDemo1.vue';
    import WatchDemo1 from './componentsdemo2/WatchDemo1.vue';
    import WatchDemo2 from './componentsdemo2/WatchDemo2.vue';
    export default {
      name:'App', //组件名
      components:{Person,VBind,ReactiveDemo2,
        ToRefsDemo1,ComputedDemo1,WatchDemo1,WatchDemo2} //注册组件
    }
  </script>
  
  <style>
    .app {
      background-color: #ddd;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
    }
  </style>